組件實作 : Demo
Button 是能夠廣泛被應用的組件之一。製作 Button 方法不只一種，你可以使用<div>、<button>、<input>元素製作，這裡我則是採用<button>元素。本篇重點目標放在建立基本的按鈕（外觀）、觸發事件（功能）使用上，實作流程如下。
<button> 元素， Class 名稱命名為 btn。屬性 美化外觀樣式。:hover觸發效果 。監聽事件讓 Button 執行相對應的函式（Function）。採用
<button>的原因在於語意比<div>容易理解，實作上會比<input>上相對單純。
我們可以在 VS Code 中加入一個 index.html，然後再複製下列程式碼：
如果不想安裝編輯器，也可以直接使用 CodePen。
（知道語法用法後，動手去修改別人寫的 Code，會加深理解力）
HTML：
<button>Open</button>
顯示結果：
上圖是<button>預設的樣子，此時我們可以在 CSS 添加下列程式碼美化樣式：
HTML：
<button class="btn">Open</button>
CSS：
.btn {
width: 160px;
height: 64px;
background-image: linear-gradient(135deg, #6555a0 0%, #578aef 55%, #8f41e9 100% );
border-radius: 8px;
border:none;
color:white;
font-size: 28px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
顯示結果：
我們在 CSS 中加入一個名稱為 btn 的 Class，這個 Class 設定 HTML 中<button>元素的樣式，設定樣式可以使用以下列幾個屬性：
width
height
background-image
border-radius
border
font-size
color
box-shadow
寬度（width）與高度（height），單位可以是 px（絕對定位），也可以使用 %、em、rem、vw、vh、auto 等等來表示【1】。只要掌握住每個單位之間的差異，除了可以在 RWD 響應式網頁設計中更加靈活，對於組件的大小、定位方式，也能更精準的掌控。
補充：
- width、 height 的設定範圍不包括 border 屬性。
- UX 設計遵循 8 像素規則【2】。
background-image 是加入一張圖片，而最直接的語法如下。
CSS：
background-image: url('圖片網址');
background-image 主要對於元素的背景做設定，有人會認為說 background-image 與 background 是一樣的東西，實際上 background 可以設定的參數比 background-image 還要來的多【3】。
在這次實作中，background-image 套用漸層色 linear-gradient，語法如下。
CSS：
background-image: linear-gradient( 角度或是方向, 起始顏色 範圍, 顏色 範圍 , 顏色 範圍 );
舉個例子。
CSS：
background-image: linear-gradient(135deg, #6555a0 0%, #578aef 55%, #8f41e9 100% );
將 background-image 加入一個漸層色，這個漸層由三個顏色所組成。方向預設由左至右，由上至下，135度的斜角線，顏色從起點 0 % 到 55 % 換一個顏色，到 100 % 再換一個顏色，% 數可以自行調整，也可以增減色彩。
值得留意的是：「若在 btn 的 Class 中加入
background-image，<button>預設的點擊效果和 hover 預設的效果會失效。」
改變矩形的 4 個角變成圓角，數值越大越接近圓形。當 border-radius 的值為 50 % 時，矩形會變成圓形（之後數值再怎麼大都還會是圓形，比如輸入 60% 或 70% 的結果都是圓形，且負數無效），有關 border-radius 的原理在參考資料【4】【5】。
使用 FANCY-BORDER-RADIUS 可以快速的產生不規則形狀的語法，使用上也很簡單，複製貼上到 border-radius 屬性值就好。
border 為邊框線，當設定了 width、 height 和 border 屬性後，即可呈現一個顯示邊框線的圖形，設定 border 屬性為 none 則不會產生邊框線。預設邊框線語法（寬度為１像素的實心黑線）。
CSS：
border: 1px solid #000 ;
設定文字的字體大小，單位為 px、em、rem 等等，或是可以用 small、large 這種寫法 ，可參考 w3schools 的 CSS font-size 用法。
color 為前景色，也就是文字顏色。除了 color 之外，只要在顏色的使用上，表示方法可以用色碼、Hex、RGB、RGBA 來處理顏色：
色碼值：像是 red、green、blue…Hex： 16 進制的表示方法，例如#000000（黑）、#FFFFFF（白）
RGB：rgb（0 , 0 , 0） 、rgb（255 , 255 , 255）RGBA：rgba（0 , 0 , 0 , 0.5）。想要做出透明的效果可以使用 RGBA 來實現rgba( red , green , blue , alpha )，rgb 範圍 0～255 ，alpha 透明度則是 1.0～0 之間的小數。
讓元素添加陰影的效果，語法如下。
box-shadow: X軸偏移量 Y軸偏移量 模糊程度 陰影顏色 inset向內;
舉個例子。
CSS：
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
實際操作可參考 CSS box-shadow【6】【7】。
HTML 的class="btn"在 CSS 中寫法為.btn。其中的「.」符號意思是選擇某個 Class 的用法，若是遇上id=”btn”這種寫法則是用「#」來代替，關於 id 和 class 差異可參考相關文章【8】。
HTML：
<button class="btn" id="js-btn" >Open</button>
Hover 為滑鼠游標選中該元素時，而處發的動作，另外，cursor:pointer; 可設定滑鼠指標，將預設的箭頭指標替換成指針（pointer）指標，更多的設定可在 MDN 上找到相關資訊【9】。
CSS：
.btn:hover {
background: #000;
cursor:pointer;
}
Font Awesome 是一個在專案上能直接使用 icon 圖示的網站，它會將向量的圖示當成字型使用，所以你可以用 CSS font 的屬性來設定 icon 大小、顏色、位置。Font Awesome 的用法很簡單，只要匯入 CDN 至你的 HTML 專案中，也就是在 HTML 檔案的 中加入以下程式碼：
Font Awesome 4.7.0：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Font Awesome 5 / 6 ： （注意要修改：yourcode.js）
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
在寫這篇文章 Font Awesome 在 2022 年已經來到了 6.1.2 版本。從第 5 版本後，需要申辦一個帳戶後，才可獲取 Font Awesome 的 CDN（kits），安裝方法與 4.7.0 版本一樣。如果有需要用到比較新（漂亮）的 icon，可以使用新版的 Font Awesome。
事件監聽指的是當元件被觸發後，後續執行的動作，比如「按下按鈕後把燈打開」這個過程，套到我們的 Button 例子來類比的話，「按鈕」就是我們用 HTML 和 CSS 所生成的那個<button>，「按下」這為事件監聽的click事件，「燈打開」為 Function 所執行的動作，「按下按鈕後把燈打開」這整個過程稱之為事件處裡。
點擊事件監聽 addEventListener( ) 標準語法為：
HTML：
<button class="btn" id="js-btn" >Open</button>
JavaScript：
window.onload = function () {
const element = document.getElementById('js-btn');
element.addEventListener('click', foo, false);
};
function foo() {
alert('Hello World');
}
整個架構就是—在 window.onload ( 當成 main 使用，程式的起始點 ) 裡面，定義了一個元素 element，document.getElementById('js-btn'); 是 JavaScript 取得 HTML 元素 id 屬性的方法，「=」是設定，也可以說是放到 XX 變數裡，整句話意思為：｢ 把 id 為 js-btn 的元素放到 element 中｣，接著使用事件監聽addEventListener( )，這個 Function 傳遞三個參數 'click', foo, false，介紹如下：
'click'是滑鼠左鍵點擊一次就觸發事件。foo則是你定義的 Function，也就是執行第一個參數後要做的事情 。true 代表 Capture（捕獲）false 代表 Bubbling（冒泡）補充：
這個問題發生在我在做專按時遇到的一個需求，目標是在一個頁面放置好幾個不同的按鈕，當每個按鈕在被點擊時，需要執行不同的任務（Function），如果說 Button 只有 2、3 個，我們能夠直接去宣告事件監聽，但若是有 50、60 個按鈕，那該如何解決？
一開始直覺想到的東西是使用For Loop來產生元素，這時遇到一個小問題，該如何在 JavaScript 裡面寫 HTML語法，並且把它塞回到 HTML檔案裡？這時候可以使用 Template literals （Template strings）模板文字。
更好的方式應該是只用一個事件監聽寫在父層，因為時間關係，這部分尚未優化，未來再找機會再將它補起來。思考方向應該是與上面說的捕獲和冒泡有關係。
如果你有製造大量相同元素、不同屬性或是函式的需求，可以先了解一下捕獲與泡泡機制，針對想要事件監聽的元素的上一層，也就是他的父層去做處理，這樣就可以在父層用一個
addEventListener()去控制多子層的 Button。多個事件的監聽會是一個容易卡住的地方，初學的新手們須小心這個坑。
在 Button 這一篇文章中，介紹了常用語法。我們也實作一個按鈕組件，並且分享了各種按鈕的寫法（CodePen 裡的 Button 範例），在接下來篇章中，若出現相同的語法，則不再重複介紹，你可以選擇回到這裡查詢 Button 的相關用法。
原來有人把 HTML、CSS、JavaScript 合稱為網頁三兄弟【10】，這樣的稱呼可以少打很多字，不知道有沒有一個統稱？！
iThome鐵人賽
看影片追技術